<template>
  <div class="view box">
    <div>
      <p>
        存储配置名称
        <el-input v-model="bucketName" size="normal" :disabled="true"></el-input>
      </p>
	    <p>
		    &#12288;&#12288;存储节点
		    <el-input v-model="region" size="normal" :disabled="true">
		    </el-input>
	    </p>
	    <p>
		    &#12288;&#12288;&#12288;&#12288;桶名
		    <el-input v-model="storageName" size="normal" :disabled="true"></el-input>
	    </p>
	    <p>
        &#12288;&#12288;存储方式
        <span class="fixWidth" >
           <el-radio v-model="type" v-for="(item,index) in typeList" :key="index" :label="item.label" :disabled="true">{{item.label}}</el-radio>
        </span>
      </p>
      <p>
        <el-button round size="normal" @click="()=>{$router.push('/configManage/storageConfig')}">返回</el-button>
      </p>
    </div>

  </div>
</template>

<script>
export default {
  name: "storageView",
  components:{},
  data(){
    return{
      typeList:[],
      regionList:[],
      bucketName:'',
      region:'',
      storageName:'',
      type:''
    }
  },
  created() {
    this.getDetail();
    this.getTypeList();
    this.getRegionList();
  },
  methods:{
    getDetail(){
      this.$Http.storageView({
        id:this.$route.query.id
      }).then(res=>{
        if(res.code === "SUCCESS"){
          this.bucketName = res.data.bucketName;
          this.region = res.data.region;
          this.storageName = res.data.storageName;
          this.type = res.data.type;
        }
        else{
          this.$message.error("操作错误，请重新操作")
        }
      })
    },
    getTypeList(){
      this.$Http.typeList().then(res => {
        this.typeList = res.data;
      })
    },
    getRegionList() {
      this.$Http.regionList().then(res => {
        this.regionList = res.data;
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

.el-radio{
  margin-right: 15px!important;
  /deep/ .el-radio__label{
    padding-left:4px!important;
  }
}
</style>
